<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货人信息表单</title>
    <link rel="stylesheet" href="lab3-3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="form-container">
        <header>
            <h1>收货人信息</h1>
            <p>请填写您的收货信息，带 <span class="required">*</span> 为必填项</p>
        </header>
        
        <form class="shipping-form">
            <div class="form-section">
                <h2><i class="fas fa-user"></i> 基本信息</h2>
                <div class="form-row">
                    <div class="form-group">
                        <label for="recipient">收货人姓名 <span class="required">*</span></label>
                        <input type="text" id="recipient" name="recipient" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号码 <span class="required">*</span></label>
                        <input type="tel" id="phone" name="phone" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" name="email">
                </div>
            </div>
            
            <div class="form-section">
                <h2><i class="fas fa-map-marker-alt"></i> 收货地址</h2>
                <div class="form-row">
                    <div class="form-group">
                        <label for="province">省份/地区 <span class="required">*</span></label>
                        <select id="province" name="province" required>
                            <option value="">请选择</option>
                            <option value="beijing">北京市</option>
                            <option value="shanghai">上海市</option>
                            <option value="guangdong">广东省</option>
                            <option value="jiangsu">江苏省</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="city">城市 <span class="required">*</span></label>
                        <select id="city" name="city" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="district">区/县 <span class="required">*</span></label>
                        <select id="district" name="district" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="address">详细地址 <span class="required">*</span></label>
                    <textarea id="address" name="address" rows="3" required></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="zipcode">邮政编码</label>
                        <input type="text" id="zipcode" name="zipcode">
                    </div>
                    <div class="form-group">
                        <label>设为默认地址</label>
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="default-address"> 是
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-section">
                <h2><i class="fas fa-truck"></i> 配送信息</h2>
                <div class="form-group">
                    <label>配送方式 <span class="required">*</span></label>
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="delivery" value="standard" checked> 标准配送 (3-5天送达)
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="delivery" value="express"> 加急配送 (1-2天送达) +￥15
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="delivery" value="same-day"> 当日达 (需12:00前下单) +￥30
                        </label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="notes">订单备注</label>
                    <textarea id="notes" name="notes" rows="2" placeholder="请填写特殊要求，如送货时间等"></textarea>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="reset" class="btn reset-btn">重置</button>
                <button type="submit" class="btn submit-btn">保存信息</button>
            </div>
        </form>
    </div>
</body>
</html>
    